<template>
  <div class="shoppingCart">
    <div class="header">
        <span>购物车</span>
        <img class="capsule-img" src="@/assets/images/diy/capsule.png" alt="" />
    </div>
    <img src="@/assets/images/diy/shoppingCart.png" alt="" class="cart">
    <div class="foot">
        <div class="left">
            <div class="choose">
                <span></span>
                <span>全选</span>
            </div>
            <div class="total">
                <span>合计:</span>
                <span>￥0.00</span>
            </div>
        </div>
        <div class="right">
            <span>编辑</span>
            <span>去结算(0)</span>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "shoppingCart",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {};
  },
  mounted() {},
  watch: {},
  computed: {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.shoppingCart {
  width: 375px;
  height: 616px;
  position: relative;
  background-color: #f2f2f2;
  .header {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #fff;
    color: #262626;
    .capsule-img {
      position: absolute;
      width: 87px;
      height: 32px;
      z-index: 12;
      right: 14px;
      top: 50%;
      transform: translateY(-16px);
    }
  }
  .cart {
      width: 100%;
      background-color: #f2f2f2;
  }
  .foot {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 48px;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12px 0 17px;
      .left {
          display: flex;
          align-items: center;
      }
      .choose {
          display: flex;
          align-items: center;
          font-size: 12px;
          color: #262626;
          span:nth-child(1) {
              width: 16px;
              height: 16px;
              border: 1px solid #707070;
              border-radius: 50%;
              margin-right: 6px;
          }
      }
      .total {
          display: flex;
          align-items: baseline;
          font-size: 12px;
          color: #262626;
          margin-left: 10px;
          span:nth-child(1) {
              font-size: 14px;
              margin-right: 5px;
          }
      }
      .right {
          display: flex;
          align-items: center;
          span {
              padding: 0 14px;
              font-size: 12px;
              border-radius: 15px;
              display: flex;
              align-items: center;
              height: 30px;
          }
          span:nth-child(1) {
              border: 1px solid #aaa;
              margin-right: 5px;
          }
          span:nth-child(2) {
              background-color: #f0250e;
              color: #fff;
          }
      }
  }
}
</style>